<template>
  <div class="app-container table-app-container">
    <div class="fixed-table">
      <div class="fixed-table-actionbar">
        <TableFilter />
        <ActionBar :belongs="belongs" :categories="categories" />
      </div>
      <PageableTable
        :loading="loading"
        :data="insideTableData"
        :total="totalElements"
        :page="currentPage"
        :page-size="pageSize"
        :table-height="tableHeight"
        class="fixed-table-table"
        @page-change="onPageChange"
        @sort-change="onSortChange"
      >
        <el-table-column v-for="column in insideColumns" :key="column.key" :label="column.title" :prop="column.key" :width="column.width" :sortable="column.sortable">
          <template slot-scope="scope">
            <column-render :render="column.render" :row="scope.row" :column="column" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="{row}">
            <el-button type="text" size="mini" icon="el-icon-edit" title="编辑" :disabled="row.changeStatus!=='created'" @click="edit(row)" />
            <el-button type="text" size="mini" icon="el-icon-delete" title="删除" :disabled="row.changeStatus!=='created'" @click="remove(row.id)" />
            <!-- <el-button type="text" size="mini" icon="el-icon-edit" title="编辑" @click="edit(row)" />
            <el-button type="text" size="mini" icon="el-icon-delete" title="删除" @click="remove(row.id)" /> -->
            <el-button :disabled="row.changeStatus!=='created'" icon="el-icon-circle-check" title="确认" size="mini" type="text" @click="confirm(row)" />
            <!-- <el-button v-if="row.changeStatus==='confirmed'" size="mini" type="text" @click="change(row)">变更</el-button> -->
          </template>
        </el-table-column>
      </PageableTable>
    </div>
    <FormDialog
      class="fixed-dialog-height"
      width="90%"
      title="编辑"
      :show.sync="dialogFormVisible"
      @on-ok="ok"
      @on-cancel="cancel"
    >
      <EditForm :id="editId" :belongs="belongs" :categories="categories" ref="editForm" />
    </FormDialog>
    <ViewDialog
      class="fixed-dialog-height"
      title="查看"
      :show.sync="dialogViewVisible"
      width="90%"
      @on-cancel="viewCancel"
    >
      <ViewForm :id="editId" />
    </ViewDialog>
  </div>
</template>

<script>
import ViewDialog from '@neu/biz-core/components/ViewDialog'
// secondary package based on el-pagination
import FormDialog from '@neu/biz-core/components/FormDialog'
// 表格查询组件独立编写，需要传递pageable-table实例的mixin方法filter
import TableFilter from './components/tableFilter'
// 编辑实例组件独立编写，需要传递id属性，判断新建还是更新操作
import EditForm from './components/editForm'
import ViewForm from './components/viewForm'
import ActionBar from './components/actionBar'
import PageableTable from '@neu/biz-core/components/PageableTable'

import { page, remove, changeStatus, update } from '@neu/dcam-ui/api/maintenanceChange'
import databind from '@neu/biz-core/mixins/databind'
import belongs from '@neu/dcam-ui/mixins/belongs'
import { formatDate } from '@neu/biz-core/utils/utils'
export default {
  name: 'PermissionsPage',
  components: {
    TableFilter,
    FormDialog,
    EditForm,
    ActionBar,
    PageableTable,
    ViewDialog,
    ViewForm
  },
  mixins: [databind, belongs],
  data() {
    return {
      r: page,
      d: remove,
      insideColumns: [
        { title: '维保负责人', width: 100, key: 'maintenanceUserName' },
        { title: '维保负责人电话', width: 150, key: 'maintenancePhone' },
        { title: '状态', width: 80, key: 'changeStatus',
          render: (h, params) => {
            const text = params.row.changeStatus === 'created' ? '已创建' : params.row.changeStatus === 'confirmed' ? '已确认' : '已完成'
            return h('span', [
              h('el-tag', text)
            ])
          } },
        { title: '编码', width: 180, key: 'code',
          render: (h, params) => { // 查看功能
            return h('span', [
              h('el-link', {
                class: 'font-12',
                attrs: { title: params.row.code },
                props: { type: 'primary' },
                on: { click: () => { this.view(params.row.id) } }},
              params.row.code)
            ])
          }
        },
        { title: '供应商', key: 'manufacturerName' },
        { title: '供应商联系人', width: 120, key: 'manufacturerPerson' },
        { title: '供应商联系电话', width: 130, key: 'manufacturerPhone' },
        { title: '创建时间', width: 90, key: 'createTime', render: (h, params) => { return h('span', formatDate(params.row.createTime)) } },
        // { title: '更新时间', width: 90, key: 'updateTime', render: (h, params) => { return h('span', formatDate(params.row.updateTime)) } },
        { title: '维保开始时间', width: 100, key: 'maintenanceStart', render: (h, params) => { return h('span', formatDate(params.row.maintenanceStart)) } },
        { title: '维保结束时间', width: 100, key: 'maintenanceEnd', render: (h, params) => { return h('span', formatDate(params.row.maintenanceEnd)) } },
        { title: '维保说明', width: 100, key: 'maintenanceNote' }
      ],
      dialogFormVisible: false,
      dialogViewVisible: false,
      dialogStatus: 'create',
      textMap: {
        update: '编辑',
        create: '新建'
      },
      editId: -1
    }
  },
  methods: {
    edit(row) {
      // if (row.changeStatus !== 'created') {
      //   return this.$message({
      //     showClose: true,
      //     message: '变更已经受理不允许编辑！',
      //     type: 'error'
      //   })
      // }
      // 打开对话框
      this.dialogFormVisible = true
      // 更新当前被编辑实体的ID，自动传递至编辑表单
      this.editId = row.id
    },
    ok() {
      // 直接调用表单实例的保存方法
      this.$refs.editForm.save().then(response => {
        if (response === false) return
        this.$message({
          showClose: true,
          message: '操作成功！',
          type: 'success'
        })
        // 调用pageable-table实例的mixin方法refresh()，更新表格
        this.refresh()
        // 关闭对话框
        this.dialogFormVisible = false
      })
    },
    cancel() {
      this.editId = ''
      this.$refs.editForm.reset()
      this.dialogFormVisible = false
    },
    confirm(row) {
      row.changeStatus = 'confirmed'
      update(row.id, row).then(response => {
        let msg = '更新成功'
        let typeMsg = 'success'
        if (response.status !== 'success') {
          msg = '更新失败'
          typeMsg = 'error'
        }
        this.refresh()
        return this.$message({
          showClose: true,
          message: msg,
          type: typeMsg
        })
      })
    },
    change(row) {
      changeStatus(row).then(res => {
        let msg = '更新资产维保信息成功'
        let typeMsg = 'success'
        if (res.status !== 'success') {
          msg = '更新资产维保信息失败'
          typeMsg = 'error'
        }
        this.refresh()
        return this.$message({
          showClose: true,
          message: msg,
          type: typeMsg
        })
      })
    },
    view(id) {
      // 打开对话框
      this.editId = id
      this.dialogViewVisible = true
    },
    viewCancel() {
      this.editId = -1
      // 关闭对话框
      this.dialogViewVisible = false
    }
  }
}
</script>
